<template>
  <!-- 催收执行页-案件信息模块-共债信息 -->
  <section class="component public-debt-info">
    <data-box :data="debtInfo" :height="390" :page="pageService" @onPageChange="refreshData" ref="data-box">
      <template slot="columns">
        <el-table-column prop="caseNumber" label="订单编号" :min-width="$helper.getColumnWidth(5)">
          <!-- <template slot-scope="scope">
            <el-button @click="jumpToOther(scope.row)" type="text">{{scope.row.caseNumber}}</el-button>
          </template> -->
        </el-table-column>
        <el-table-column prop="principalName" label="委托方" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="loanDate" label="放款日期" :formatter="(row) => $filter.dateFormat(row.loanDate)" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="mobileNo" label="手机号" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="partnerName" label="业务团队" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="bankName" label="贷款银行" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="overdueStage" label="逾期阶段" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="sumMoney" label="催收总金额" :min-width="$helper.getColumnWidth(6)" :formatter="(row) =>  $filter.toThousands(row.overdueAmount)">
        </el-table-column>
        <el-table-column prop="businessAddress" label="业务承接地" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="boardAddress" label="上牌地" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="carNo" label="车牌号" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { Dependencies } from "~/core/decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { DataImportExcelInfoService } from "~/services/dataimp-service/data-import-excel-info.service";
import { Prop } from "vue-property-decorator";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import { namespace } from "vuex-class";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {}
})
export default class PublicDebtInfo extends Vue {
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(DataImportExcelInfoService)
  private dataImportExcelInfoService: DataImportExcelInfoService;

  private debtInfo: any[] = [];

  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.Mutation private updateCaseId;

  private activated() {
    this.refreshData();
  }

  private refreshData() {
    if (this.menuChannel === MENU_CHANNEL.Case_imported) {
      this.dataImportExcelInfoService
        .getImportDebtCaseInfo(this.caseId)
        .subscribe(data => {
          this.debtInfo = data || [];
        });
    } else {
      // 获取案件信息
      this.caseOperatorPageService
        .queryDebtCaseInfo(
          { caseId: this.caseId },
          this.pageService,
          this.sortService
        )
        .subscribe(data => {
          this.debtInfo = data || [];
        });
    }
  }
  private jumpToOther(row) {
    this.updateCaseId(row.id);
  }
}
</script>

<style lang="less" scoped>
</style>
